<%--
  Created by IntelliJ IDEA.
  User: 99207
  Date: 2024/9/5
  Time: 21:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/drugManagement.css">
    <title>药品管理系统</title>
</head>
<body>
<div class="container">
    <nav class="sidebar">
        <ul>

            <li>药品管理</li>
            <li>用户管理</li>
            <!-- 其他菜单项 -->
        </ul>
    </nav>
    <div class="main-content">
        <h1>药品管理系统</h1>
        <div class="search-bar">
            <input type="text" id="search" placeholder="搜索药品">
            <button onclick="searchDrug()">搜索</button>
            <button onclick="addDrug()">添加</button>
        </div>
        <table>
            <thead>
            <tr>
                <th>ID</th>
                <th>药品名称</th>
                <th>库存数量</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="drugTableBody">
            <!-- 药品记录将通过JavaScript动态添加 -->
            </tbody>
        </table>
        <div class="pagination">
            <button onclick="prevPage()">上一页</button>
            <span id="currentPage">1</span>
            <button onclick="nextPage()">下一页</button>
        </div>
    </div>
</div>

<script>
    const drugs = [
        { id: 1, name: '阿莫西林', stock: 2333, status: '已到货' },
        { id: 2, name: '头孢', stock: 5, status: '已到货' },
        { id: 3, name: '泼尼松', stock: 2, status: '已到货' },
        { id: 4, name: '氟康唑', stock: 444, status: '已到货' },
        { id: 5, name: '其他药品', stock: 44, status: '已到货' },
    ];
    let currentPage = 1;
    const itemsPerPage = 2;

    function renderTable() {
        const tbody = document.getElementById('drugTableBody');
        tbody.innerHTML = '';
        const start = (currentPage - 1) * itemsPerPage;
        const end = start + itemsPerPage;
        const paginatedDrugs = drugs.slice(start, end);

        paginatedDrugs.forEach(drug => {
            const row = `<tr>
                    <td>${drug.id}</td>
                    <td>${drug.name}</td>
                    <td>${drug.stock}</td>
                    <td>${drug.status}</td>
                    <td>
                        <button onclick="editDrug(${drug.id})">编辑</button>
                        <button onclick="deleteDrug(${drug.id})">删除</button>
                    </td>
                </tr>`;
            tbody.innerHTML += row;
        });
        document.getElementById('currentPage').innerText = currentPage;
    }

    function searchDrug() {
        const searchTerm = document.getElementById('search').value;
        const filteredDrugs = drugs.filter(drug => drug.name.includes(searchTerm));
        // 这里可以实现搜索功能
        // 需要更新表格内容
    }

    function addDrug() {
        // 实现添加药品的功能
    }

    function editDrug(id) {
        // 实现编辑药品的功能
    }

    function deleteDrug(id) {
        // 实现删除药品的功能
    }

    function prevPage() {
        if (currentPage > 1) {
            currentPage--;
            renderTable();
        }
    }

    function nextPage() {
        if (currentPage * itemsPerPage < drugs.length) {
            currentPage++;
            renderTable();
        }
    }

    // 初始渲染
    renderTable();
</script>
</body>
</html>